<script setup>
// 导入threejs
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 导入lil.gui
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
// 导入hdr加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
// 导入gltf加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 导入draco解码器
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";


let renderer, scene, camera

const initFn = () => {
  const domElement = document.querySelector('.three_box');
  let width = domElement.clientWidth;
  let height = domElement.clientHeight;
  // 创建场景
  scene = new THREE.Scene();

  // 创建相机
  camera = new THREE.PerspectiveCamera(
    45, // 视角
    window.innerWidth / window.innerHeight, // 宽高比
    0.1, // 近平面
    100000 // 远平面
  );



  // 创建渲染器
  renderer = new THREE.WebGLRenderer({
    logarithmicDepthBuffer: true,  // 抗闪烁，如果无效，就调整模型高度吧
    antialias: true, // 开启模型渲染抗锯齿，可关
    alpha: true // 背景透明
  });

  // renderer.setSize((window.innerWidth * 0.677), window.innerHeight);
  renderer.setSize((width), height);

  renderer.setClearAlpha(0.1); // 设置背景透明度为0.5
  document.body.appendChild(renderer.domElement);

  // 设置相机位置
  camera.position.z = 200;
  camera.position.y = 2;
  camera.position.x = 2;
  camera.lookAt(0, 0, 0);

  // 添加世界坐标辅助器
  const axesHelper = new THREE.AxesHelper(1);
  scene.add(axesHelper);

  // 添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);


  // 设置带阻尼的惯性
  controls.enableDamping = true;
  // 设置阻尼系数
  controls.dampingFactor = 0.05;



  // 渲染函数
  function animate() {
    if (controls) {
      controls.update();
    }

    if (renderer) {
      renderer.render(scene, camera);
    }
    requestAnimationFrame(animate);
    // 渲染
  }
  animate();

  // 监听窗口变化
  window.addEventListener("resize", () => {
    // 重置渲染器宽高比
    const domElement = document.querySelector('.three_box');
    let width = domElement.clientWidth;
    let height = domElement.clientHeight;

    renderer.setSize(width, height);
    // 重置相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相机投影矩阵
    camera.updateProjectionMatrix();
  });

  // 实例化加载器gltf
  const gltfLoader = new GLTFLoader();
  // 加载模型
  gltfLoader.load(
    // 模型路径
    "./model/ImageToStl.glb",
    // 加载完成回调
    (gltf) => {
      gltf.scene.rotation.x = Math.PI / 4;
      gltf.scene.rotation.y = Math.PI / 2;
      scene.add(gltf.scene);
    }
  );



  // 加载环境贴图
  let rgbeLoader = new RGBELoader();
  rgbeLoader.load("./texture/Alex_Hart-Nature_Lab_Bones_2k.hdr", (envMap) => {
    envMap.mapping = THREE.EquirectangularReflectionMapping;
    // 设置环境贴图
    scene.environment = envMap;

    // scene.background = new THREE.Color(0x00ab63);
  });
}


onMounted(() => {
  initFn()
})
const isshowModel = ref('block')


onBeforeUnmount(() => {

  scene = null;
  camera = null;
  renderer.forceContextLoss();
  renderer.domElement = null;
  renderer = null;
  isshowModel.value = 'null'

  //  this.mesh.remove();
  // scene.removeFromParent();
  const body = document.querySelector('body');
  const canvas = document.querySelector('canvas');
  body.removeChild(canvas)

})
</script>

<template>
  <div class="w-full h-full three_box"></div>
</template>

<style  scoped>
/* .three_box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
} */
</style>
